<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改入库单')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <script src="/js/jquery.min.js"></script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-ruku-edit" th:object="${gouhuoruku}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">生成日期
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="xiadanriqi"
                           th:value="${#dates.format(gouhuoruku.xiadanriqi, 'yyyy-MM-dd')}"
                           class="form-control" placeholder="yyyy-MM-dd"
                           type="text" required>
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">下单操作人
                ：</label>
            <div class="col-sm-8">
                <input name="xiadanren" th:field="*{xiadanren}" class="form-control"
                       type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">入库操作人
                ：</label>
            <div class="col-sm-8">
                <input name="rukuren" th:field="*{rukuren}" class="form-control"
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-4"></div>
            <label class="col-sm-4 control-label"
                   style="text-align: center;font-weight: bold;font-size: large">商品：</label>
            <div class="col-sm-4"><label for="shangpinbianhao"></label><input name="shangpinbianhao"
                                                                              th:field="*{shangpinbianhao}"
                                                                              id="shangpinbianhao" hidden type="text">
            </div>

            <div class="col-sm-12">
                <div class="table-box">
                    <div id="toolbar">
                        <a id="addRow" onclick="addRow()">添加行</a>
                        <a id="removeRow" onclick="removeRow()">删除行</a>
                    </div>
                    <datalist id="shangpinlist" th:with="type=${@shangpinguanliMapper.selectShangpingList()}">
                        <option th:each="lists : ${type}"
                                th:text="${lists.getShangpinming()+'|'+lists.getShangpinguigekuan()+'*'+lists.getShangpinguigegao()+'|'+lists.getShangpinkaixiang()}"
                                th:value="${lists.getShangpinbianhao()}"></option>
                    </datalist>
                    <table id="bootstrap-table">

                    </table>

                </div>
                <script th:inline="javascript">
                    $(function () {
                        var options = {
                            showToggle: false,
                            showSearch: false,
                            cardView: false,
                            showColumns: false,
                            showPaginationSwitch: false,     //显示切换分页按钮
                            showRefresh: false,      //显示刷新按钮
                            columns: [{
                                checkbox: true
                            },
                                {
                                    field: 'shangpinming',
                                    title: '商品名',
                                    align: "center",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shangpinming' placeholder='商品名' list='shangpinlist'" +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "' onblur='getValuesName(" + index + ")'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                }, {
                                    field: 'shangpinbianhao',
                                    title: '商品编号',
                                    align: "center",
                                    visible: false,
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shangpinbianhao' placeholder='商品编号' " +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },
                                {
                                    field: 'shangpinleibie',
                                    title: '商品类别',
                                    align: "center",
                                    width: '150px',
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shangpinleibie' placeholder='商品类别' " +
                                            "class='form-control'  value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },
                                {
                                    field: 'shangpinguigekuan',
                                    title: '尺寸',
                                    align: "center",
                                    width: '80px',
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<div style='display: flex;align-items: center'><div>宽:</div><input id='" + index + "shangpinguigekuan' placeholder='规格宽' " +
                                            "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'></div>");
                                        action.push("<div style='display: flex;align-items: center'><div>高:</div><input id='" + index + "shangpinguigegao' placeholder='规格高' " +
                                            "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'></div>")
                                        return action.join('');
                                    }
                                },
                                {
                                    field: 'shangpinkaixiang',
                                    title: '开向',
                                    align: "center",
                                    width: '100px',
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinkaixiang' placeholder='开向' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'shangpinshuliang',
                                    title: '数量',
                                    align: "center",
                                    width: '70px',
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinshuliang' placeholder='商品数量' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'shangpinjinhuojia',
                                    title: '商品进货价',
                                    align: "center",
                                    // visible: false,
                                    width: '70px',
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinjinhuojia' placeholder='商品进货价' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'index',
                                    title: '序列',
                                    align: "center",
                                    width: '20px',
                                    // visible: false,
                                    formatter: function (value, row, index) {
                                        return row.index = index + 1; //返回行号
                                    }
                                },]
                        };
                        $.table.init(options);
                        chushihua()
                    })

                    function chushihua() {
                        var jsonStr = $("#shangpinbianhao").val();
                        // console.log(jsonStr)
                        let list = JSON.parse(jsonStr)
                        // console.log(list)
                        for (let i = 0; i < list.length; i++) {
                            const row =
                                {
                                    "shangpinming": list[i]["shangpinming"],
                                    "shangpinbianhao": list[i]["shangpinbianhao"],
                                    "shangpinleibie": list[i]["shangpinleibie"],
                                    "shangpinguigekuan": list[i]["shangpinguigekuan"],
                                    "shangpinguigegao": list[i]["shangpinguigegao"],
                                    "shangpinkaixiang": list[i]["shangpinkaixiang"],
                                    "shangpinshuliang": list[i]["shangpinshuliang"],
                                    "shangpinjinhuojia": list[i]["shangpinjinhuojia"]
                                };
                            console.log(list[i]["shangpinming"])

                            $('#bootstrap-table').bootstrapTable('append', row);
                            //更新行数据
                            $('#bootstrap-table').bootstrapTable('updateRow', row);
                            //定位到最后一行
                            $('#bootstrap-table').bootstrapTable('scrollTo', 'bottom');
                        }
                    }

                    //添加行
                    function addRow() {
                        var row =
                            {
                                "shangpinming": "",
                                "shangpinbianhao": "",
                                "shangpinleibie": "",
                                "shangpinguigekuan": 0,
                                "shangpinguigegao": 0,
                                "shangpinkaixiang": "",
                                "shangpinshuliang": 0,
                                "shangpinjinhuojia": 0
                            };
                        //append  追加到最后一行
                        //prepend  新增到第一行
                        $('#bootstrap-table').bootstrapTable('append', row);
                        //更新行数据
                        $('#bootstrap-table').bootstrapTable('updateRow', row);
                        //定位到最后一行
                        $('#bootstrap-table').bootstrapTable('scrollTo', 'bottom');
                    }

                    function getValues(index) {
                        const rows = $('#bootstrap-table').bootstrapTable('getData');
                        let zongjine = 0;
                        $.each(rows, function (i, row) {
                            if (row.index === (index + 1)) {
                                row.shangpinleibie = $("#" + index + "shangpinleibie").val();
                                row.shangpinguigekuan = $("#" + index + "shangpinguigekuan").val();
                                row.shangpinguigegao = $("#" + index + "shangpinguigegao").val();
                                row.shangpinkaixiang = $("#" + index + "shangpinkaixiang").val();
                                row.shangpinshuliang = $("#" + index + "shangpinshuliang").val();
                                row.shangpinjinhuojia = $("#" + index + "shangpinjinhuojia").val();
                                $('#bootstrap-table').bootstrapTable('updateRow', row);

                                document.getElementById('shangpinbianhao').value = JSON.stringify(rows)
                                // return false;
                            }
                            zongjine += Number(row.shangpinshuliang) * row.shangpinjinhuojia
                        });
                        document.getElementById("zongjine").value = zongjine
                    }

                    function getValuesName(index) {
                        // console.log(index)
                        var rows = $('#bootstrap-table').bootstrapTable('getData');
                        $.each(rows, function (i, row) {
                            if (row.index === (index + 1)) {
                                // console.log()
                                var msgStr = $("#" + index + "shangpinming").val()
                                var data;
                                $.ajax({
                                    type: "POST",
                                    datatype: "string",
                                    url: "/api/shangPinXiangQing",
                                    data: {"danhao": msgStr},
                                    async: false,
                                    success: function (result) {
                                        if (result !== null) {
                                            data = result
                                        }
                                    }
                                });
                                // console.log(data)
                                row.shangpinming = data["shangpinming"] !== null ? data["shangpinming"] : undefined;
                                row.shangpinbianhao = data["shangpinbianhao"] !== null ? data["shangpinbianhao"] : undefined;
                                row.shangpinleibie = data["shangpinleibie"] !== null ? data["shangpinleibie"] : undefined;
                                row.shangpinguigekuan = data["shangpinguigekuan"];
                                row.shangpinguigegao = data["shangpinguigegao"];
                                row.shangpinkaixiang = data["shangpinkaixiang"] !== null ? data["shangpinkaixiang"] : undefined;
                                row.shangpinshuliang = 1;
                                row.shangpinjinhuojia = data["shangpinjinhuojia"]
                                $('#bootstrap-table').bootstrapTable('updateRow', row);


                                document.getElementById('zongjine').value = data["shangpinjinhuojia"] + Number(document.getElementById('zongjine').value);
                                document.getElementById('shangpinbianhao').value = JSON.stringify(rows)
                                return false;
                            }
                        });
                    }

                    function removeRow() {
                        var rows = $('#bootstrap-table').bootstrapTable('getSelections');//获取选中行
                        if (rows.length === 0) {
                            layer.msg("请选择要删除的数据");
                            return;
                        }
                        var indexs = [];
                        let zongjine = 0;
                        for (var i = 0; i < rows.length; i++) {
                            indexs[i] = rows[i].index;
                            zongjine += rows[i].shangpinshuliang * Number(rows[i].shangpinjinhuojia)
                        }
//删除
                        $('#bootstrap-table').bootstrapTable('remove', {
                            field: 'index',
                            values: indexs
                        });
                        document.getElementById("zongjine").value = Number($('#zongjine').val()) - zongjine
                        document.getElementById('shangpinbianhao').value = JSON.stringify(rows)
                    }
                </script>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">总金额
                ：</label>
            <div class="col-sm-8">
                <input name="zongjine" th:field="*{zongjine}" class="form-control"
                       type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注
                ：</label>
            <div class="col-sm-8">
                <input name="beizhu" th:field="*{beizhu}" class="form-control"
                       type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "jinchuguanli/ruku";
    $("#form-ruku-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-ruku-edit').serialize());
        }
    }

    $("input[name='xiadanriqi']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='rukuriqi']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>
</body>
</html>